<template>
    <div class="evaluateComparison-index-view">
        <headerView :isLogout="false"></headerView>
        <div class="evaluateComparison-view">
          <div class="evaluateComparison-table">
            <div id="evaluateComparisonEcharts"></div>
          </div>
          <div class="evaluateComparison-list" ref="evaluateComparisonList">

            <div class="data-row" :id="`itemRef${index}`" @click="handleDataRow($event , item.node_id)"
                 v-for="(item,index) in evaluateComparisonData" :key="index">
              <span class="data-title">{{ item.node_name }}</span>
              <span class="data-data">{{ item.count }}份</span>
            </div>


          </div>
        </div>
    </div>
</template>

<script>
    import headerView from '../header/index'
    import * as echarts from 'echarts';
    import {getAnalyseList} from '@/api/home'
    export default {
      name: "index",
      components: {
          headerView,
      },
      data() {
          return {
            evaluateComparisonData: [],
            clickItem: undefined,
            // 评估对比
            evaluateComparisonOption:{
              tooltip: {
                // 鼠标悬浮提示数据
                trigger: "axis",
                backgroundColor: "rgb(32, 33, 36,.7)",
                borderColor: "rgb(32, 33, 36,0.20)",
                borderWidth: 15,
                textStyle: {
                  // 文字提示样式
                  color: "#fff",
                  fontSize: "12",
                },
                axisPointer: {
                  // 坐标轴虚线
                  type: "cross",
                  label: {
                    backgroundColor: "#6a7985",
                  },
                },
              },
              xAxis: {
                type: 'category',
                data: ['认知', '语言表达', '语言理解'], // 这里是x轴的标签，可以根据需要调整或动态生成
                axisLabel: {
                  // color: '#333', // Y轴文本颜色
                  fontSize: 14, // Y轴文本字体大小
                  fontWeight: 'bold',
                  interval: 0,
                  rotate: 0
                }
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: '数据1', // 第一个柱状图的数据集名称
                  data: [120, 200, 150], // 第一个数据集的值
                  type: 'bar', // 设置图表类型为柱状图
                  label: {
                    // show: true,
                    position: 'top',
                    color: 'black',
                    fontWeight: 'bold',
                  },
                  barWidth: "15%", //调整柱状图宽度
                  itemStyle: {
                    normal: {
                      /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
                      borderRadius: [0, 0, 0, 0],
                      /*--------设置柱形图渐变色 -------------*/
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#CBE9FE",
                        },
                        {
                          offset: 1,
                          color: "#CBE9FE", // 86 78 255
                        },
                      ]),
                    },
                  },

                },
              ]
            },
          }
      },
      mounted() {
        console.log(this.$route.query)
        let data  = this.$route.query;
        this.evaluateComparisonData = data
        // 获得数据
        let nodeId = data[0].node_id
        this.queryEchartsData(nodeId)
        // 初始化页面样式
        this.$nextTick(()=>{
          let item = document.getElementById("itemRef0")
          this.clickItem = item
          item.classList.add("selectDataRowStyle")
          if(item.childNodes){
            item.childNodes[0].classList.add("selectDataRowTitleStyle")
          }
        })
      },
      methods: {
        queryEchartsData(nodeId){
          getAnalyseList(nodeId).then(resp=>{
            console.log(resp)
            let groupList = resp.data.groupList;
            let evaluateComparisonOptionCategory = []
            let evaluateComparisonOptionValues = []
            let data1 = groupList[0];
            data1.forEach(item => {
              evaluateComparisonOptionCategory.push(item.node_name)
            })
            // 初始化几个柱状图的颜色
            let colors = [
              {
                color: "#CBE9FE"
              },
              {
                color: "#9FDDFF"
              },
              {
                color: "#11A2F0"
              },
              {
                color: "#CBE9FE"
              },
            ]
            groupList.forEach((item,index) => {
              let seriesData = {
                name: '数据'+(index+1), // 第一个柱状图的数据集名称
                data: [], // 第一个数据集的值
                type: 'bar', // 设置图表类型为柱状图
                label: {
                  // show: true,
                  position: 'top',
                  color: 'black',
                  fontWeight: 'bold',
                },
                barWidth: "15%", //调整柱状图宽度
                itemStyle: {
                  normal: {
                    /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
                    borderRadius: [0, 0, 0, 0],
                    /*--------设置柱形图渐变色 -------------*/
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: colors[index].color,
                      },
                      {
                        offset: 1,
                        color: colors[index].color,// 86 78 255
                      },
                    ]),
                  },
                },

              }
              item.forEach(item => {
                seriesData.data.push(item.score)
              })
              evaluateComparisonOptionValues.push(seriesData)
            })

            this.evaluateComparisonOption.xAxis.data = evaluateComparisonOptionCategory
            this.evaluateComparisonOption.series = evaluateComparisonOptionValues
            this.initEvaluateComparisonEcharts();

          })
        },
        handleDataRow(event,nodeId){
          console.log("之前的值是：",this.clickItem)
          if(this.clickItem){
            this.clickItem.classList.remove("selectDataRowStyle");
            let listItems = this.clickItem.childNodes;
            if(listItems){
              listItems[0].classList.remove('selectDataRowTitleStyle');
            }

          }

          const e = event.currentTarget;
          this.clickItem = e;
          let listItems = e.childNodes;
          e.classList.add("selectDataRowStyle");
          listItems[0].classList.add('selectDataRowTitleStyle');

          console.log("选择的测试id是",nodeId);
          this.queryEchartsData(nodeId);
        },
        initEvaluateComparisonEcharts(){
          let chartDom = document.getElementById('evaluateComparisonEcharts');
          let myChart = echarts.init(chartDom);
          myChart.setOption(this.evaluateComparisonOption);
        },
      },
      created() {
      }
    }
</script>

<style lang="scss" scoped>
    .selectDataRowTitleStyle{
      color: #46A3F1;
      font-weight: bold;
    }
    .selectDataRowStyle{
      border-left: 10px solid #46A3F1 !important;
    }

    #evaluateComparisonEcharts{
      height: 72vh;
    }

    .evaluateComparison-index-view {
        background: url("../../assets/images/index-bg.jpg") repeat-y;
        background-size: 100vw 100vh;
        width: 100vw;
        height: 100vh;
    }

    .evaluateComparison-view {
      margin-top: 5.5vh;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-evenly;
      height: 72vh;
      .evaluateComparison-table{
        height: 100%;
        width: 75vw;
        background-color: white;
        border-radius: 10px;
      }
      .evaluateComparison-list{
        height: 100%;
        width: 15vw;
        background-color: white;
        border-radius: 10px;

        .data-row{
          width: 12vw;
          margin: 3.2vh auto ;
          height: 6.5vh;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;
          background-color: #F6F6F8;
          cursor: pointer;
          font-size: 0.12rem;
          .data-title{}
          .data-data{
            font-weight: 600;
          }
        }
      }
    }
</style>
